<template>
	<div>
		<el-card class="box-card">
			<div slot="header">
				<span>{{ $route.meta.title}}</span>
			</div>
			<el-tabs v-model="activeName" @tab-click="tabChange">
				<el-tab-pane label="基本信息" name="userInfo" >
					<div class="panel-heading">
						<img src="http://placeimg.com/200/200/scenery">
						<span class="title">
							<p class="role">{{currentUser.nickname}}</p><span class="name">{{currentUser.name}}</span>
						</span>
						<i @click="editInfo()" :class="editButtonClass" style="font-size: 28px; position: absolute; left:400px;top:70px; cursor: pointer;"></i>
					</div>
					<div class="panel-body">
						<ul>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-id-card"></i></el-col>
									<el-col :span="6">账号</el-col>
									<el-col :span="6">{{currentUser.userAccount}}</el-col>
									<!-- <el-col :span="editWidth">
										<el-input v-model="currentUser.userAccount" ></el-input>
									</el-col>	 -->
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-user"></i></el-col>
									<el-col :span="6">姓名</el-col>
									<el-col :span="infoWidth">{{currentUser.name}}</el-col>
									<el-col :span="editWidth">
										<el-input v-model="currentUser.name"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-user-circle"></i></el-col>
									<el-col :span="6">昵称</el-col>
									<el-col :span="infoWidth">{{currentUser.nickname}}</el-col>
									<el-col :span="editWidth">
										<el-input v-model="currentUser.nickname"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-envelope"></i></el-col>
									<el-col :span="6">EMAIL</el-col>
									<el-col :span="infoWidth">{{currentUser.email}}</el-col>
									<el-col :span="editWidth">
										<el-input v-model="currentUser.email"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-female"></i></el-col>
									<el-col :span="6">性别</el-col>
									<el-col :span="infoWidth">{{genderMap[currentUser.gender]}}</el-col>
									<el-col :span="editWidth">
										<el-select v-model="currentUser.gender" placeholder="请选择性别">
											<el-option v-for="(value, key) in genderMap" :key="key" :label="value" :value="key">
											</el-option>
										</el-select>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-birthday-cake"></i></el-col>
									<el-col :span="6">生日</el-col>
									<el-col :span="infoWidth">{{currentUser.birthday}}</el-col>
									<el-col :span="editWidth">
										<el-date-picker v-model="currentUser.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"
										 placeholder="选择生日">
										</el-date-picker>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-phone"></i></el-col>
									<el-col :span="6">手机</el-col>
									<el-col :span="infoWidth">{{currentUser.mobile}}</el-col>
									<el-col :span="editWidth">
										<el-input v-model="currentUser.mobile"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"><i class="fa fa-calendar"></i></el-col>
									<el-col :span="6">个性签名</el-col>
									<el-col :span="infoWidth">{{currentUser.remarks}}</el-col>
									<el-col :span="editWidth">
										<el-input v-model="currentUser.remarks"></el-input>
									</el-col>
								</el-row>
							</li>
						</ul>
					</div>
				</el-tab-pane>
				<el-tab-pane label="密码修改" name="password">
					<div class="panel-body">
						<ul>
							<li>
								<el-row :gutter="20">
									<el-col :span="2">旧密码</el-col>
									<el-col :span="3">
										<el-input v-model="password.oldPassword"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="2">新密码</el-col>
									<el-col :span="3">
										<el-input v-model="password.newPassword"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="2">确认密码</el-col>
									<el-col :span="3">
										<el-input v-model="password.comfirmPassword"></el-input>
									</el-col>
								</el-row>
							</li>
							<li>
								<el-row :gutter="20">
									<el-col :span="4"></el-col>
									<el-col :span="6">
										<el-button style="margin-top: -10px;" type="primary" @click="savePassword">确 定</el-button>
									</el-col>
								</el-row>
							</li>
						</ul>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script>
	import {
		getUserInfo,
		setUserInfo
	} from '../../utils/dataStorage.js';
	import {
		save,
		findById,
		updatePassword
	} from '../../api/user';
	import {
		dictionaryMap
	} from '../../api/dictionary';
	export default {
		data() {
			return {
				infoWidth: 6,
				editWidth: 0,
				activeName: 'userInfo',
				formLabelWidth: '120px',
				currentUser: {
					"nickname": "",
					"name": "",
					"userAccount": ""
				},
				password:{"id":"","oldPassword":"","newPassword":"","comfirmPassword":""},
				genderMap: {}
			}
		},
		created: function() {
			dictionaryMap('GENDER').then(data => {
				if (data) {
					this.genderMap = data;
				}
				this.currentUser = getUserInfo();
				this.password.id = this.currentUser.id;
				this.loadCurrentUser(this.currentUser.id);
			}).catch(exception => {

			});			
		},
		computed: {
			editButtonClass: function() {
				if (this.editWidth > 0) {
					return "fa fa-floppy-o";
				} else {
					return "el-icon-edit-outline";
				}
			}
		},
		methods: {
			tabChange: function(tab) {
				if (tab.name != "userInfo") {
					if (this.editWidth > 0) {
						this.editWidth = this.editWidth > 0 ? 0 : 6;
						this.infoWidth = this.infoWidth > 0 ? 0 : 6;
					}
				}
			},
			editInfo: function() {
				if (this.editWidth > 0) {
					save(this.currentUser).then(res => {
						this.currentUser = res;
						this.$message({
							message: '保存成功!',
							type: 'success'
						});
						this.editWidth = this.editWidth > 0 ? 0 : 6;
						this.infoWidth = this.infoWidth > 0 ? 0 : 6;
					}).catch(exception => {

					});
				} else {
					this.editWidth = this.editWidth > 0 ? 0 : 6;
					this.infoWidth = this.infoWidth > 0 ? 0 : 6;
				}
			},
			loadCurrentUser: function(id) {
				findById(id).then(data => {
					this.currentUser = data;
					setUserInfo(data);
				}).catch(exception => {

				});
			},
			savePassword:function(){
				if(this.password.oldPassword == undefined || this.password.oldPassword == ""){
					this.$message({
						message: '请输入旧密码!',
						type: 'warning'
					});
				}else if(this.password.newPassword == undefined || this.password.newPassword == ""){
					this.$message({
						message: '新密码不能为空!',
						type: 'warning'
					});
				}else if(this.password.comfirmPassword == undefined || this.password.comfirmPassword == ""){
					this.$message({
						message: '确认密码不能为空!',
						type: 'warning'
					});
				}else if(this.password.newPassword != this.password.comfirmPassword){
					this.$message({
						message: '两次输入密码不一样，请重新输入!',
						type: 'warning'
					});
				}else{
					updatePassword(this.password).then(res => {
						this.$message({
							message: '密码修改成功!',
							type: 'success'
						});
						sessionStorage.removeItem(this.$Config.tokenKey);
						sessionStorage.removeItem(this.$Config.userInfoKey);
						this.$router.push({
							path: '/login'
						});
					}).catch(exception => {
					
					});
				}				
			}
		},
		mounted: function() {

		},
	}
</script>
<style lang="scss">
	.box-card {
		border-radius: 0;

		.panel-heading {
			display: flex;
			text-align: left;
			width: 100%;
			border-bottom: 1px solid #eeeff1;
			padding: 15px;
			font-weight: bold;

			img {
				margin-right: 15px;
				width: 90px;
				height: 90px;
				border-radius: 50%;
			}

			.title {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.name {
					color: #367fa9;
					font-size: 18px;
				}

				.role {
					color: #99a9c0;
				}
			}
		}

		.panel-body {
			color: #3c8dbc;

			ul {
				li {
					border-bottom: 1px solid #eeeff1;
					padding: 0 15px;
					height: 50px;
				}

				.el-input {
					margin-top: -8px;
					font-size: 16px !important;
					min-width: 500px;

					input {
						color: #3c8dbc;
						font-size: 16px !important;
					}
				}

				.el-row {
					.el-col {
						padding-top: 0px;
						height: 40px;
					}
				}

				.el-form {
					.el-form-item {
						font-size: 16px !important;
					}

					font-size: 16px !important;

					.el-col {
						padding-top: 0px;
						height: 50px;
					}

					label {
						color: #3c8dbc;
					}

					input {
						color: #3c8dbc;
					}

					.el-row {
						border-bottom: 1px solid #eeeff1;
					}
				}
			}
		}

	}
</style>
